| [Vue]使用iframe嵌入页面 | 您所在的位置：网站首页 › vuejs v-iframe › [Vue]使用iframe嵌入页面 |
|
Vue中嵌套iframe，将要嵌套的文件放在static文件夹中： src可以使用相对路径，也可使用网页路径等： 在Vue+ElementUI+iframe实现在当前页面中嵌入另一个HTML页面： export default { data () { return { } }, mounted(){ /** * iframe-宽高自适应显示 */ function changeMobsfIframe(){ const mobsf = document.getElementById('mobsf'); const deviceWidth = document.body.clientWidth; const deviceHeight = document.body.clientHeight; mobsf.style.width = (Number(deviceWidth)-120) + 'px'; //数字是页面布局宽度差值 mobsf.style.height = (Number(deviceHeight)-80) + 'px'; //数字是页面布局高度差 } changeMobsfIframe() window.onresize = function(){ changeMobsfIframe() } }, } scrolling="no"表示不显示滚动条style="position:absolute;top:80px;left: 120px;" 表示嵌入的iframe位置距离浏览器顶部80px，距离浏览器左侧120px，刚好是我的侧边栏和顶部导航栏的宽度mounted() 中的方法在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作。包括调整页面的高和宽changeMobsfIframe 为自适应宽高的方法，分别在第一次页面加载和调整浏览器大小（onresize ()）时被调用 |
| CopyRight 2018-2019 实验室设备网 版权所有 |